package web.jquery;

import org.apache.wicket.Component;
import org.apache.wicket.behavior.Behavior;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.Button;

public class JQueryHome extends WebPage{
	private static final long serialVersionUID = 1L;
	private Component texto;

	public JQueryHome() {
		this.add(
			texto(),
			boton()
		);
	}

	private Component texto() {
		String mostrar = "Texto para mostrar/ocultar, clickear en el boton para ver la funcion!";
		texto = new Label("texto", mostrar);
		texto.setOutputMarkupId(true);
		return texto; 
	}

	private Component boton() {
		Component boton = new Button("boton");
		boton.add(comportamientoToggle(boton));
		return boton;
	}

	protected Behavior comportamientoToggle(final Component componente) {
		return new Behavior() {
			private static final long serialVersionUID = 1L;
			
			@Override
			public void renderHead(Component component, IHeaderResponse response) {
				response.renderJavaScriptReference("http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js");
				response.renderJavaScriptReference("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js");
				
				String toggle =
					"$(document).ready(function(){\n" +
					"	$('#"+componente.getMarkupId()+"').click(function(){\n" +
					"		$(this).toggleClass('active').next().slideToggle('blind');\n" +
					"	});\n" +
					"});";
				response.renderJavaScript(toggle, "toggle");
			}
		};
	}

	@Override
	public void renderHead(IHeaderResponse response) {
		super.renderHead(response);
	}
}